<template>
  <div>
    <section class="main isPc">
      <section class="prcDesc">
        <p class="pTitle"><router-link to="/">首页</router-link> - <router-link v-if="showData.category" tag="a"  :to="'/prcList?id='+showData.category.id">{{showData.category.category_name}}</router-link> - {{showData.goods_name}}</p>
        <div class="info">
          <div class="loading" v-if="loadStart"><span></span></div>
          <div class="prcTop" v-if="!loadStart">
            <div class="left">
              <p class="bigPrc"><img :src="showData.goods_logo"></p>
              <div class="prcList">
                <span @click="bigPrc(showData.goods_logo)">
                  <img :src="showData.goods_logo">
                </span>
                <span @click="bigPrc(item.image)" v-for="(item,index) in showData.goods_image" v-if="index<5">
                  <img :src="item.image">
                </span>
              </div>
            </div>
            <div class="right">
              <p class="title">{{showData.goods_name}}</p>
              <p class="price"><span>价格</span>£{{showData.goods_price|allPrice}}</p>
              <p class="number"><span>数量</span>
                <input type="number" v-model='number' :max="showData.goods_number" min='1' value="1" name="">
              </p>
              <p class="number"><span>库存</span>
                {{showData.goods_number}}
              </p>
              <p class="count"><span>重量</span>{{showData.goods_weight}}</p>
              <p class="pay"><span>支付</span>货到付款</p>
              <p class="click">
                <button @click="addCart">加入购物车</button>
              </p>
            </div>
          </div>
          <div class="prcInfo">
            <p class="stitle">商品详情</p>
            <div class="prcDescInfo" v-if="showData.goods_describe" v-html="showData.goods_describe.describe"></div>
          </div>
          <div class="prcAbout">
            <p class="stitle">类似商品</p>
            <span class="next" :class="{on:prcRight}" @click="marginRight"></span>
            <span class="prev" :class="{on:prcLeft}" @click="marginLeft"></span>
            <div class="aboutList">
              <ul :style="{width:prcListLen+'px',left:-prcListLeft+'px'}">
                <li v-for="item in prcList">
                  <div v-if="item.goods_number==0" class="prcNone">
                    <p>售罄</p>
                  </div>
                  <router-link tag="a" :to="{path:'/prcShow',query: {id:item.id}}">
                      <img v-lazy="item.goods_logo_preview">
                      <p class="title">{{item.goods_name}}</p>
                      <p class="price">£{{item.goods_price}}</p>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </section>

    <section class="prcDescWap isWap">
      <p class="pTitle"><router-link to="/">首页</router-link> - <router-link v-if="showData.category" tag="a"  :to="'/prcList?id='+showData.category.id">{{showData.category.category_name}}</router-link></p>
      <p class="title">{{showData.goods_name}}</p>
      <p class="bigPrc"><img :src="showData.goods_logo"></p>
      <p class="prcWapTitle"><span>价格:</span>£{{showData.goods_price|allPrice}}</p>
      <p class="prcWapTitle"><span>数量:</span>
        <input type="number" v-model='number' :max="showData.goods_number" min='1' value="1" name="">
      </p>
      <p class="prcWapTitle"><span>库存:</span>
        {{showData.goods_number}}
      </p>
      <p class="prcWapTitle"><span>重量:</span>{{showData.goods_weight}}</p>
      <p class="prcWapTitle">
        <button @click="addCartWap">加入购物车</button>
      </p>

      <div class="prcInfo">
        <p class="stitle">商品详情</p>
        <div class="prcDescInfo" v-if="showData.goods_describe" v-html="showData.goods_describe.describe"></div>
      </div>

      <div class="prcAbout">
        <p class="stitle">类似商品</p>
        <div class="wapShowList">
          <swiper :aspect-ratio="300/800">
              <swiper-item class="swiper-demo-img">
                <div v-for="(val,index) in prcList" class="gunDiv" v-if="index<2">
                  <div v-if="val.goods_number==0" class="prcNoneWap">
                    <p>售罄</p>
                  </div>
                  <div class="wapBuy">
                    <span class="spanA" @click="wapCartOpen"></span>
                    <p class="wapBuyOn"><span class="spanB" @click="PostCart(val)"></span><input v-model="wapBuyNum" type="text" name=""></p>
                  </div>
                  <a target="_blank" :href="'/prcShow?id='+val.id">
                    <img v-lazy="val.goods_logo_preview">
                    <p class="title">{{val.goods_name}}</p>
                    <p class="price">£{{val.goods_price|allPrice}}</p>
                  </a>
                </div>
              </swiper-item>

              <swiper-item class="swiper-demo-img">
                <div v-for="(val,index) in prcList" class="gunDiv" v-if="index==2||index==3">
                  <div v-if="val.goods_number==0" class="prcNoneWap">
                    <p>售罄</p>
                  </div>
                  <div class="wapBuy">
                    <span class="spanA" @click="wapCartOpen"></span>
                    <p class="wapBuyOn"><span class="spanB" @click="PostCart(val)"></span><input v-model="wapBuyNum" type="text" name=""></p>
                  </div>
                  <a target="_blank" :href="'/prcShow?id='+val.id">
                    <img v-lazy="val.goods_logo_preview">
                    <p class="title">{{val.goods_name}}</p>
                    <p class="price">£{{val.goods_price|allPrice}}</p>
                  </a>
                </div>
              </swiper-item>

              <swiper-item class="swiper-demo-img">
                <div v-for="(val,index) in prcList" class="gunDiv" v-if="index==4||index==5">
                  <div v-if="val.goods_number==0" class="prcNoneWap">
                    <p>售罄</p>
                  </div>
                  <div class="wapBuy">
                    <span class="spanA" @click="wapCartOpen"></span>
                    <p class="wapBuyOn"><span class="spanB" @click="PostCart(val)"></span><input v-model="wapBuyNum" type="text" name=""></p>
                  </div>
                  <a target="_blank" :href="'/prcShow?id='+val.id">
                    <img v-lazy="val.goods_logo_preview">
                    <p class="title">{{val.goods_name}}</p>
                    <p class="price">£{{val.goods_price|allPrice}}</p>
                  </a>
                </div>
              </swiper-item>
            </swiper>
        </div>
      </div>

    </section>
  </div>
  
</template>
<script>
import { Swiper, SwiperItem } from 'vux'
import {Get,Post} from '@/config/api.js'
import axios from 'axios'
export default {
  name: 'hello',
  data() {
    return {
        loadStart:false,
        number:1,
        showData:'',
        prcNum:0,
        prcLeft:true,
        prcRight:false,
        prcList:[],
        prcAbout:'',
        wapBuyNum:1
    }
  },
  components: {
    Swiper,
    SwiperItem
  },
  watch:{
      '$route.query.id'(val){
          this.getData(val)
      }
  },
  mounted() {
    this.getData(this.$route.query.id)
    this.$store.dispatch("isLoading",false)

    $(document).on('click','.spanA',function(){
      $('.wapBuyOn').removeClass('on')
      $(this).next('p').addClass('on')
    })

    $(document).on('click','.spanB',function(){ 
        $('.wapBuyOn').removeClass('on')
        $('.wapBuy').removeClass('on')
      })
  },
  computed:{
    prcListLen(){
      return this.prcList.length*216
    },
    prcListLeft(){
      return this.prcNum*226+5
    }
  },
  methods: {
    //获取商品详情
    async getData(val){
      if(this.vCheck()){
        this.loadStart=true
        let reg=await Get('/goods/'+val+'?_include=category,goods_describe,goods_image,category1',this.$store.state.token)
        this.prcAbout=reg.data.category.id
        this.showData=reg.data
        this.loadStart=false
        this.getList()
      }
    },
    //获取相关商品
    async getList(){
      if(this.vCheck()){
        let reg=await Get('/goods?category_id='+this.prcAbout+'&is_sale=1',this.$store.state.token)
        this.prcList=reg.data
      }
    },
    
    //加入购物车
    async addCart(){
      if(this.vLogin()){
        if(this.number<=this.showData.goods_number){
          let date={
              "goods_id":this.$route.query.id,
              "goods_count":this.number
          }
          this.$store.dispatch("isLoading",true)
          await Post('/carts',this.$store.state.token,date)
          this.$store.dispatch("isLoading",false)
          alert('加入成功！')
        }else{
          alert('购物数量大于库存!')
          this.number=1
        }
        
        
      }
    },
    //加入购物车wap
    async addCartWap(){
      if(this.vLogin()){
        if(this.number<=this.showData.goods_number){
          let date={
              "goods_id":this.$route.query.id,
              "goods_count":this.number
          }
          this.$store.dispatch("isLoading",true)
          await Post('/carts',this.$store.state.token,date)
          this.$store.dispatch("isLoading",false)
          alert('加入成功！')
          this.getNowWap()
        }else{
          alert('购物数量大于库存!')
          this.number=1
        }
      }else{
        this.$router.push({ path: '/login'})
      }
    },


    //大小图转换
    bigPrc(val){
      this.showData.goods_logo=val
    },
    //滚动图向右移动
    marginRight(){
        if(this.prcNum+6<this.prcList.length){
          this.prcNum++
          if(this.prcNum+6==this.prcList.length){
              this.prcRight=true
          }else{
              this.prcRight=false
              this.prcLeft=false
          }
        }
    },
    //滚动图向左移动
    marginLeft(){
        if(this.prcNum>0){
          this.prcNum--
          if(this.prcNum==0){
              this.prcLeft=true
          }else{
              this.prcRight=false
              this.prcLeft=false
          }
        }
    },
    //wap获取购物车信息
    async getNowWap(){
      if(this.vLogin()){
        let reg=await Get('/carts?_sort=id&_pagination=false',this.$store.state.token)
        let all=0
        for(let i=0;i<reg.data.length;i++){
          all+=reg.data[i].amount
        }
        let data={
          num:reg.data.length,
          price:all
        }
        this.wapPriceCart=reg.data
        this.$store.dispatch("wapCart",data)
      }
    },
    //加入购物车
    async PostCart(val){
      if(this.vLogin()){
          if(this.wapBuyNum<=val.goods_number){
            let date={
              "goods_id":val.id,
              "goods_count":this.wapBuyNum
            }
            this.$store.dispatch("isLoading",true)
            await Post('/carts',this.$store.state.token,date)
            this.$store.dispatch("isLoading",false)
            alert('加入成功！')
            this.getNowWap()
          }else{
            alert('商品库存不足')
            this.wapBuyNum=val.goods_number
          }
      }else{
        this.$router.push({ path: '/login'})
      }
    },
    wapCartOpen(){
      this.wapBuyNum=1
    }

  }
}

</script>
